/**
 * Created by Mak on 2017/9/14.
 */
@import "../common";
$width: 400px;
$page-height: 22px;

@mixin page-style {
  min-width: 26px;
  height: $page-height;
  line-height: 20px;
  margin: 4px 0 0 -1px;
  border: 1px solid $border-color-default;
  background-color: $color-white;
  font-size: $font-size-min;
  font-weight: normal;
  color: $color-black;
}

.table-container {
  .opration_wrap {
    // display:inline;
    // float: right;
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin: 10px 5px 7px 0px;

    .line {
      display: inline-block;
      margin-top: 12px;
      font-size: 14px;
    }
  }

  .opration_wrap_collect {
    margin: 10px 5px 7px 0px;
    display: flex;
    font-size: 15px;
    line-height: 30px;
    font-weight: bold;

  }

  .search_wrap {
    .el-form-item {
      margin-bottom: 10px;

      .el-form-item__label {
        line-height: 30px;
      }

      .el-form-item__content {
        line-height: 30px;
        font-size: 12px;

        .el-input__inner,
        .el-cascader,
        .el-input__icon {
          height: 30px;
          line-height: 30px;
        }

        .el-date-editor .el-range-separator {
          line-height: 22px;
        }

        .el-button {
          padding: 6px 8px;
        }
      }
    }
  }

  .el-table {
    width: 100%;
    height: calc(100% - 38px);
    border: 1px solid $border-color-default;

    .el-table__fixed-right-patch {
      background-color: #f2f2f2;
    }

    .el-table__header {
      thead {
        tr {
          background-color: #f2f2f2;

          th {
            border-bottom: 1px solid $border-color-default;
            background-color: #f2f2f2;
            padding: 7px 0;
            font-size: $font-size-min;
            color: $color-black;
          }
        }
      }
    }

    .el-table__body-wrapper {
      height: calc(100% - 38px);
    }

    .el-table__body {
      tbody {
        tr {
          td {
            padding: 7px 0;
            border-color: $border-color-default;
            font-size: $font-size-min;
            color: $color-black;

            .cell {
              .photo {
                width: 30px;
                height: 30px;
                border-radius: 50%;
              }
              .el-image{
                width: 70px;
                height: 70px;
              }

              .el-button--mini {
                padding: 7px;
                color: $color-dark-green;

                &:focus {
                  background-color: $color-white;
                  border-color: #dcdfe6;
                }

                &:hover {
                  background-color: $color-white;
                  border-color: $color-green
                }
              }

              .el-dropdown {
                .el-button {
                  padding: 7px;
                  border-color: $border-color-default;
                  background-color: #fff;
                  color: $color-black;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }

  .el-pagination {
    padding: 3px 15px;

    border: 1px solid $border-color-default {
      top: 0;
    }

    background-color: #f2f2f2;
    font-size: $font-size-min;
    color: $color-black;

    span {
      color: $color-black;
    }

    .el-pagination__total {
      float: left;
    }

    .el-pagination__sizes {
      float: left;

      .el-input {
        width: 80px;

        .el-input__inner {
          height: $page-height;
          line-height: $page-height;
          padding: 0 6px;
          border-color: $border-color-default;
          font-size: $font-size-min;
          color: $color-black;
          text-align: left;
        }
      }
    }

    .el-pagination__jump {
      float: left;
      margin-left: 0;
      font-size: $font-size-min;

      .el-pagination__editor {
        font-size: $font-size-min;

        .el-input__inner {
          height: $page-height;
          line-height: $page-height;
        }

      }
    }

    .btn-next,
    .btn-prev {
      float: right;
      @include page-style;
    }

    .el-pager {
      float: right;

      li {
        @include page-style;

        &:not(.disabled).active {
          border-color: $color-green;
          background-color: $color-green;
        }
      }
    }
  }
}
